<template>
  <div id="SecondaryAttributes">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <div slot="header">
            分类列表&nbsp;&nbsp;
            <el-button
              type="primary"
              style="display: inline-block; float: right"
              @click="showaddcategory = true"
              >新增分类</el-button
            >
          </div>
          <div>
            <el-row :gutter="20">
              <el-col
                :span="12"
                v-for="category in categories"
                :key="category.id"
              >
                <el-card>
                  <div slot="header">{{ category.name }}</div>
                  <div>
                    <el-button
                      icon="el-icon-edit"
                      @click="editCategory(category)"
                    ></el-button>
                    <el-button
                      icon="el-icon-delete"
                      @click="deleteCategory(category.id)"
                    ></el-button>
                    <el-dialog
                      title="新增属性"
                      :visible.sync="showaddattribute"
                      width="30%"
                    >
                      <el-form>
                        <el-form-item label="名称">
                          <el-input v-model="newAttributeName"></el-input>
                        </el-form-item>
                      </el-form>
                      <div slot="footer" class="dialog-footer">
                        <el-button @click="showaddattribute = false"
                          >关闭</el-button
                        >
                        <el-button type="primary" @click="addAttribute(1)"
                          >保存</el-button
                        >
                      </div>
                    </el-dialog>
                  </div>
                </el-card>
              </el-col>
            </el-row>

            <el-dialog
              title="新增分类"
              :visible.sync="showaddcategory"
              width="30%"
            >
              <el-form>
                <el-form-item label="名称">
                  <el-input v-model="newCategoryName"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="showaddcategory = false">关闭</el-button>
                <el-button type="primary" @click="addAttribute(0)"
                  >保存</el-button
                >
              </div>
            </el-dialog>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header">
            属性列表
            <el-button
              type="primary"
              style="display: inline-block; float: right"
              @click="showaddattribute = true"
              >新增属性</el-button
            >
          </div>
          <div>
            <el-select
              v-model="selectCategoryId"
              @change="handleCategoryChange"
            >
              <el-option
                v-for="item in categories"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
            <el-table :data="attributes">
              <el-table-column prop="name" label="属性"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    icon="el-icon-edit"
                    @click="editCategory(scope.row)"
                  ></el-button>
                  <el-button
                    icon="el-icon-delete"
                    @click="deleteCategory(scope.row.id)"
                  ></el-button>
                  <el-dialog
                    title="修改属性"
                    :visible.sync="showupdateAttribute"
                    width="30%"
                  >
                    <el-form>
                      <el-form-item label="名称">
                        <el-input v-model="updatename"></el-input>
                      </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                      <el-button @click="showupdateAttribute = false"
                        >取消</el-button
                      >
                      <el-button type="primary" @click="doupdate()"
                        >确定</el-button
                      >
                    </div>
                  </el-dialog>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "SecondaryAttributes",
  data() {
    return {
      updatename: "",
      updatecategory: "",
      newCategoryName: "",
      newAttributeName: "",
      selectCategoryId: "",
      dialogVisible: false,
      // 控制对话框显示的属性
      showaddcategory: false,
      showaddattribute: false,
      showupdateAttribute: false,
      categories: [],
      attributes: [],
      currentAttribute: {},
    };
  },
  created() {
    this.getAttributes(1);
    this.getCategories();
  },
  methods: {
    getCategories() {
      this.axios({
        url: "/erp/goods/attributes/getList",
        params: {
          parentId: 0,
        },
      })
        .then((rs) => {
          this.categories = rs.data.list;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getAttributes(value) {
      this.selectCategoryId = value;
      this.axios({
        url: "/erp/goods/attributes/getList",
        params: {
          parentId: value,
        },
      }).then((rs) => {
        this.attributes = rs.data.list;
      });
    },

    addAttribute(value) {
      var name;
      var parentId;
      if (value == 0) {
        name = this.newCategoryName;
        parentId = 0;
      } else {
        name = this.newAttributeName;
        parentId = this.selectCategoryId;
      }
      var attributes = {
        parentId,
        name,
      };
      console.log("attributes", attributes);
      this.axios({
        url: "/erp/goods/attributes/add",
        method: "POST",
        data: attributes,
      }).then((rs) => {
        if (rs.data.itStatus == true) {
          alert("添加成功！");
          this.showaddcategory = false;
          this.showaddattribute = false;
          this.newAttributeName = "";
          this.newCategoryName = "";
          this.getCategories();
          if (parentId == 0) {
            this.getAttributes(1);
          } else {
            this.getAttributes(parentId);
          }
        } else {
          alert("添加失败！");
        }
      });
    },
    doupdate() {
      var category = this.updatecategory;
      category.name = this.updatename;
      console.log(category);
      this.axios({
        url: "/erp/goods/attributes/update",
        method: "POST",
        data: category,
      }).then((rs) => {
        if (rs.data.update == true) {
          alert("修改成功！");
          this.showupdateAttribute = false;
          this.updatecategory = "";
          this.updatename = "";
          this.getCategories();
        } else {
          alert("修改失败！");
        }
      });
    },
    editCategory(category) {
      console.log("*********", category);
      this.updatename = category.name;
      this.updatecategory = category;
      this.showupdateAttribute = true;
    },
    handleCategoryChange(value) {
      console.log(this.selectCategoryId);
      this.getAttributes(value);
    },
    deleteCategory(id) {
      if (confirm("是否删除？")) {
        this.axios({
          url: "/erp/goods/attributes/del",
          params: {
            id: id,
          },
        }).then((rs) => {
          console.log(rs.data);
          if (rs.data.itStatus == true) {
            alert("删除成功！");
            this.getCategories();
            this.getAttributes(1);
          } else {
            alert("删除失败！");
          }
        });
      }
    },
  },
};
</script>

<style scoped>
/* 添加一些样式以适应布局 */
</style>